<template>
  <div
    class="XZQHComponent-pannel"
    v-show="$store.getters._getDefaultXZQHVisible"
  >
    <div class="XZQHComponent-header">
      <span>行政区划导航</span>
      <i
        class="el-icon-close"
        @click="closeXZQHPannel"
      />
    </div>
    <div class="XZQH-select-pannel">
      <span class="XZQH-select-label">省份：</span>
      <el-select
        v-model="provinceValue"
        @change="getCityAndCountyData"
        size="mini"
        clearable
        placeholder="请选择省份"
      >
        <el-option
          v-for="item in provinceOptions"
          :key="item.label"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
    <div class="XZQH-content-pannel">
      <tbody>
        <tr
          v-for="item in cityAndCountyOptions"
          :key="item.label"
        >
          <td style="min-width: 50px">
            <span
              class="city-item"
              :value="item.value"
              @click="handleItemClick(item.value, 'city')"
            >
              {{ item.label }}
            </span>
          </td>
          <td>
            <span
              class="county-item"
              v-for="item2 in item.children"
              :key="item2.attributes.Name"
              :value="item2.attributes.Code"
              @click="handleItemClick(item2.attributes.Code, 'county')"
            >{{ item2.attributes.Name }}</span>
          </td>
        </tr>
      </tbody>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useStore } from '@/store'
import QueryTask from '@arcgis/core/tasks/QueryTask'
import Query from '@arcgis/core/rest/support/Query'
import { XZQHCityWebMokatuoServices, XZQHCountyWebMokatuoServices, XZQHProvinceWebMokatuoServices } from '@/utils/constans'
import Graphic from '@arcgis/core/Graphic'
const store = useStore()
let graphic:Graphic
const provinceOptions = ref<any[]>([])
const provinceValue = ref<string>('')
const cityAndCountyOptions = ref<any[]>([])
// 获取行政区划 省份数据
const getProvinceData = async () => {
  const queryTask = new QueryTask({
    url: XZQHProvinceWebMokatuoServices
  })
  const query = new Query()
  query.returnGeometry = false
  query.outFields = ['*']
  query.where = '1=1'

  // Promise then 链式调用
  queryTask.execute(query).then(function (results:any) {
    const currentData:any[] = []
    if (results.features.length > 0) {
      results.features.map((item:any) => {
        return currentData.push({
          value: item.attributes.Code,
          label: item.attributes.Name
        })
      })
      provinceOptions.value = currentData
    } else {
      ElMessage.warning('暂时没有省份数据')
    }
  })
}
// 行政区划 省份数据变化事件
// const handleProvinceValueChange = async (value:any) => {
//   getCityAndCountyData(value)
// }
const getCityAndCountyData = async (value:any) => {
  const provinceCode = value.toString().substring(0, 2)
  const queryTask = new QueryTask({
    url: XZQHCityWebMokatuoServices
  })
  const query = new Query()
  query.returnGeometry = false
  query.outFields = ['*']
  query.where = "Code like '" + provinceCode + "%'"

  // async await用法
  const results = await queryTask.execute(query)
  const currentCityData:any[] = []
  if (results.features.length > 0) {
    results.features.map((item:any) => {
      return currentCityData.push({
        value: item.attributes.Code,
        label: item.attributes.Name
      })
    })
    // 循环遍历 获取每一市级对应的区县数据
    Promise.all(
      currentCityData.map(async (item2) => {
        const cityCode = item2.value.toString().substring(0, 4)
        const queryTask2 = new QueryTask({
          url: XZQHCountyWebMokatuoServices
        })
        const query2 = new Query()
        query2.returnGeometry = false
        query2.outFields = ['*']
        query2.where = "Code like '" + cityCode + "%'"

        const result2 = await queryTask2.execute(query2)
        item2.children = result2.features
        return item2
      })
    ).then((res) => {
      cityAndCountyOptions.value = res
    })
  } else {
    ElMessage.warning('暂时没有市级数据')
  }
}
// 定位跳转并高亮
const handleItemClick = async (val:any, type:any) => {
  let serverUrl = ''
  let code = ''
  const view = store.getters._getDefaultMapView
  if (type === 'city') {
    code = val.toString().substring(0, 4)
    serverUrl = XZQHCityWebMokatuoServices
  } else if (type === 'county') {
    code = val.toString().substring(0, 6)
    serverUrl = XZQHCountyWebMokatuoServices
  }
  const queryTask = new QueryTask({
    url: serverUrl
  })
  const query = new Query()
  query.returnGeometry = true
  query.outFields = ['*']
  query.where = "Code like '" + code + "%'"

  const results = await queryTask.execute(query)

  // 渲染和定位
  const featuresResult = results.features[0]
  if (graphic) {
    view.graphics.remove(graphic)
  }
  const fillSymbol = {
    type: 'simple-fill',
    color: [
      188,
      240,
      234,
      0.1
    ],
    outline: {
      color: '#00FFFF',
      width: 2
    }
  }

  graphic = new Graphic({
    geometry: featuresResult.geometry,
    symbol: fillSymbol
  })
  view.graphics.add(graphic)

  view.goTo({
    center: [
      featuresResult.geometry.extent.center.longitude,
      featuresResult.geometry.extent.center.latitude
    ],
    zoom: 8
  })
}
const closeXZQHPannel = () => {
  const currentVisible = store.getters._getDefaultXZQHVisible
  store.commit('_setDefaultXZQHVisible', !currentVisible)
}
onMounted(() => {
  getProvinceData()
})
</script>

<style>
.XZQHComponent-pannel {
    position: absolute;
    top: 20px;
    left: 15px;
    width: 500px;
    height: 600px;
    background-color: #fff;
}
.XZQHComponent-header {
    width: 100%;
    height: 35px;
    border-bottom: 1px solid #e4e7ed;
    padding: 0 5px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
}
.XZQHComponent-header > span {
    line-height: 35px;
    font-size: 16px;
    font-weight: 600;
}
.XZQHComponent-header > i {
    line-height: 35px;
    cursor: pointer;
}
.XZQH-select-pannel {
    width: 100%;
    height: 30px;
    padding: 0 5px;
    box-sizing: border-box;
    margin: 5px 0;
}
.XZQH-select-label {
    font-size: 13px;
}
.XZQH-content-pannel {
    width: 100%;
    height: 525px;
    overflow: auto;
    padding: 0 5px;
    box-sizing: border-box;
}
.city-item {
    font-size: 12px;
    color: #5f6477;
    font-weight: 600;
    cursor: pointer;
}
.county-item {
    font-size: 12px;
    color: #999;
    margin: 0 10px 5px 0;
    cursor: pointer;
}
.county-item:hover {
    color: #409eff;
}

.XZQHComponent-pannel tr {
    display: block; /*将tr设置为块体元素*/
    margin-bottom: 15px; /*设置tr间距为15px*/
}
</style>
